/*
Generic containers for columns and layouts
=============================================
*/

/* Container Utilities*/
.fl-fix {overflow: auto; zoom:1;}

/* 
* The Micro Clearfix solution from http://nicolasgallagher.com/micro-clearfix-hack/
* Licensed under the MIT license
*/

/* For modern browsers */
.fl-clearfix:before, .fl-clearfix:after {content:""; display:table;}
.fl-clearfix:after {clear:both;}

/* For IE 6/7 (trigger hasLayout) */
.fl-clearfix {zoom:1;}


.fl-push {clear:both;}

/* Container alignment */
 /* IE 6 needs inline display to prevent double margin bug (other browsers ignore it) */
.fl-force-right {float:right; display:inline;}
.fl-force-left {float:left; display:inline;}
.fl-centered {margin-left:auto; margin-right:auto; display:block;}

/* Generic container, proxy for other container effects */
.fl-container {}

/* Fixed width containers */
.fl-container-50 {width: 50px;}
.fl-container-100 {width: 100px;}
.fl-container-150 {width: 150px;}
.fl-container-200 {width: 200px;}
.fl-container-250 {width: 250px;}
.fl-container-300 {width: 300px;}
.fl-container-350 {width: 350px;}
.fl-container-400 {width: 400px;}
.fl-container-450 {width: 450px;}
.fl-container-500 {width: 500px;}
.fl-container-550 {width: 550px;}
.fl-container-600 {width: 600px;}
.fl-container-650 {width: 650px;}
.fl-container-700 {width: 700px;}
.fl-container-750 {width: 750px;}
.fl-container-800 {width: 800px;}
.fl-container-850 {width: 850px;}
.fl-container-900 {width: 900px;}
.fl-container-950 {width: 950px;}
.fl-container-1000 {width: 1000px;}

/* Flex width containers */
.fl-container-auto {width: auto;}
.fl-container-flex {width: 100%; clear:both;}
.fl-container-flex1 {width: 1%;}
.fl-container-flex2 {width: 2%;}
.fl-container-flex3 {width: 3%;}
.fl-container-flex4 {width: 4%;}
.fl-container-flex5 {width: 5%;}
.fl-container-flex6 {width: 6%;}
.fl-container-flex7 {width: 7%;}
.fl-container-flex8 {width: 8%;}
.fl-container-flex9 {width: 9%;}
.fl-container-flex10 {width: 10%;}
.fl-container-flex11 {width: 11%;}
.fl-container-flex12 {width: 12%;}
.fl-container-flex13 {width: 13%;}
.fl-container-flex14 {width: 14%;}
.fl-container-flex15 {width: 15%;}
.fl-container-flex16 {width: 16%;}
.fl-container-flex17 {width: 17%;}
.fl-container-flex18 {width: 18%;}
.fl-container-flex19 {width: 19%;}
.fl-container-flex20 {width: 20%;}
.fl-container-flex21 {width: 21%;}
.fl-container-flex22 {width: 22%;}
.fl-container-flex23 {width: 23%;}
.fl-container-flex24 {width: 24%;}
.fl-container-flex25 {width: 25%;}
.fl-container-flex26 {width: 26%;}
.fl-container-flex27 {width: 27%;}
.fl-container-flex28 {width: 28%;}
.fl-container-flex29 {width: 29%;}
.fl-container-flex30 {width: 30%;}
.fl-container-flex31 {width: 31%;}
.fl-container-flex32 {width: 32%;}
.fl-container-flex33 {width: 33%;}
.fl-container-flex34 {width: 34%;}
.fl-container-flex35 {width: 35%;}
.fl-container-flex36 {width: 36%;}
.fl-container-flex37 {width: 37%;}
.fl-container-flex38 {width: 38%;}
.fl-container-flex39 {width: 39%;}
.fl-container-flex40 {width: 40%;}
.fl-container-flex41 {width: 41%;}
.fl-container-flex42 {width: 42%;}
.fl-container-flex43 {width: 43%;}
.fl-container-flex44 {width: 44%;}
.fl-container-flex45 {width: 45%;}
.fl-container-flex46 {width: 46%;}
.fl-container-flex47 {width: 47%;}
.fl-container-flex48 {width: 48%;}
.fl-container-flex49 {width: 49%;}
.fl-container-flex50 {width: 50%;}
.fl-container-flex51 {width: 51%;}
.fl-container-flex52 {width: 52%;}
.fl-container-flex53 {width: 53%;}
.fl-container-flex54 {width: 54%;}
.fl-container-flex55 {width: 55%;}
.fl-container-flex56 {width: 56%;}
.fl-container-flex57 {width: 57%;}
.fl-container-flex58 {width: 58%;}
.fl-container-flex59 {width: 59%;}
.fl-container-flex60 {width: 60%;}
.fl-container-flex61 {width: 61%;}
.fl-container-flex62 {width: 62%;}
.fl-container-flex63 {width: 63%;}
.fl-container-flex64 {width: 64%;}
.fl-container-flex65 {width: 65%;}
.fl-container-flex66 {width: 66%;}
.fl-container-flex67 {width: 67%;}
.fl-container-flex68 {width: 68%;}
.fl-container-flex69 {width: 69%;}
.fl-container-flex70 {width: 70%;}
.fl-container-flex71 {width: 71%;}
.fl-container-flex72 {width: 72%;}
.fl-container-flex73 {width: 73%;}
.fl-container-flex74 {width: 74%;}
.fl-container-flex75 {width: 75%;}
.fl-container-flex76 {width: 76%;}
.fl-container-flex77 {width: 77%;}
.fl-container-flex78 {width: 78%;}
.fl-container-flex79 {width: 79%;}
.fl-container-flex80 {width: 80%;}
.fl-container-flex81 {width: 81%;}
.fl-container-flex82 {width: 82%;}
.fl-container-flex83 {width: 83%;}
.fl-container-flex84 {width: 84%;}
.fl-container-flex85 {width: 85%;}
.fl-container-flex86 {width: 86%;}
.fl-container-flex87 {width: 87%;}
.fl-container-flex88 {width: 88%;}
.fl-container-flex89 {width: 89%;}
.fl-container-flex90 {width: 90%;}
.fl-container-flex91 {width: 91%;}
.fl-container-flex92 {width: 92%;}
.fl-container-flex93 {width: 93%;}
.fl-container-flex94 {width: 94%;}
.fl-container-flex95 {width: 95%;}
.fl-container-flex96 {width: 96%;}
.fl-container-flex97 {width: 97%;}
.fl-container-flex98 {width: 98%;}
.fl-container-flex99 {width: 99%;}

/*
* Linearizes, !importants override specificity
*/
.fl-layout-linear * {
    clear: both !important;
    float:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    overflow:visible !important; /* no scroll bars, backwards compat with 1.3.1 */
    text-align:left !important; /* default alignment */
}

/* Override inline elements */
.fl-layout-linear .fl-force-left,
.fl-layout-linear .fl-force-right,
.fl-layout-linear .fl-col,
.fl-layout-linear .fl-grid li {
	display:block !important;
	width: auto !important;
}

/* Make all block elements uniform width */
.fl-layout-linear div,
.fl-layout-linear table,
.fl-layout-linear h1, .fl-layout-linear h2, .fl-layout-linear h3, .fl-layout-linear h4, .fl-layout-linear h5, .fl-layout-linear h6,
.fl-layout-linear p,
.fl-layout-linear form, .fl-layout-linear fieldset,
.fl-layout-linear ul, .fl-layout-linear dl, .fl-layout-linear ol,
.fl-layout-linear pre, .fl-layout-linear hr, .fl-layout-linear blockquote {
    width: 100% !important;
	max-width: 960px;
	min-width: 560px;
	/*padding: 0 !important;  a problem when bg images, and padding to give space for it */
}

.fl-layout-linear .fl-hidden-accessible {
	overflow: hidden !important;
}

/* Deprecated */
.fl-layout-linear .fl-linearEnabled { width:100% !important; display:block;}

/*
* Aligns containers and contents of a container. Best practice for linear layouts.
*/
.fl-layout-linear.fl-layout-align-right *,
.fl-layout-linear .fl-layout-align-right * {
    text-align:right !important;
}
.fl-layout-linear.fl-layout-align-center *,
.fl-layout-linear .fl-layout-align-center * {
    text-align:center !important;
}

/*
Layout Helpers
=============================================
*/
/* Columns: A quick column grid system */
/* Flex width columns (containers with margins and padding) */
.fl-col-justified {float:left; display:inline; overflow:auto; text-align:justify;} /* redundant: text alignment now in fluid.text.css */

.fl-col-flex2, .fl-col-flex3, .fl-col-flex4, .fl-col-flex5 {overflow:auto; zoom:1;}
.fl-col {float:left; display:inline;}
.fl-col-flex5 .fl-col {width:18.95%; margin-left:0.25%;margin-right:0.25%; padding-left:0.25%; padding-right:0.25%}
.fl-col-flex4 .fl-col {width:24%; margin-left:0.25%;margin-right:0.25%; padding-left:0.25%; padding-right:0.25%}
.fl-col-flex3 .fl-col {width:32.33%; margin-left:0.25%;margin-right:0.25%; padding-left:0.25%; padding-right:0.25%}
.fl-col-flex2 .fl-col {width:48.85%; margin-left:0.25%;margin-right:0.25%; padding-left:0.25%; padding-right:0.25%}

/* CHANGE TO LAYOUT not COL since this will become a layout helper */
.fl-col-mixed,
.fl-col-mixed2,
.fl-col-mixed3 {overflow:auto; zoom:1;}

/* Old System */
.fl-col-mixed .fl-col-side {width:200px;}
.fl-col-mixed .fl-col-side,
.fl-col-mixed .fl-col-main {padding:0 10px;}

.fl-col-mixed2 .fl-col-side {width:200px; padding:0 10px; float:left;}
.fl-col-mixed2 .fl-col-main {margin-left:220px; padding:0 10px;} /* margin goes on whichever side the fixed column goes */

.fl-col-mixed3 .fl-col-main {margin:0 220px;} /* margin goes on whichever side the fixed column goes */

/* New System, requires fl-force-XX on the fixed column, provides some basic numbers to start with */
.fl-col-fixed, .fl-col-flex {padding:0 10px;}

.fl-col-mixed .fl-col-fixed {width:200px; padding:0 10px;}
.fl-col-mixed .fl-col-flex {margin-left:220px; padding:0 10px;}
.fl-col-mixed .fl-col-flex-left {margin-right:220px; padding:0 10px;}

.fl-col-mixed-100 .fl-col-fixed {width:100px;}
.fl-col-mixed-100 .fl-col-flex {margin-left:120px;}
.fl-col-mixed-100 .fl-col-flex-left {margin-right:120px;}

.fl-col-mixed-150 .fl-col-fixed {width:150px;}
.fl-col-mixed-150 .fl-col-flex {margin-left:170px;}
.fl-col-mixed-150 .fl-col-flex-left {margin-right:170px;}

.fl-col-mixed-200 .fl-col-fixed {width:200px;}
.fl-col-mixed-200 .fl-col-flex {margin-left:220px;}
.fl-col-mixed-200 .fl-col-flex-left {margin-right:220px;}

.fl-col-mixed-250 .fl-col-fixed {width:250px;}
.fl-col-mixed-250 .fl-col-flex {margin-left:270px;}
.fl-col-mixed-250 .fl-col-flex-left {margin-right:270px;}

.fl-col-mixed-300 .fl-col-fixed {width:300px;}
.fl-col-mixed-300 .fl-col-flex {margin-left:320px;}
.fl-col-mixed-300 .fl-col-flex-left {margin-right:320px;}


/*
* Tabs: a quick tab system
* Dependency: list-based markup ?
*/
.fl-tabs {margin:10px 0 0 0; border-bottom:1px solid #000; text-align:center; padding-bottom:2px;}
.fl-tabs li {list-style-type:none; display:inline;}
/* star hack to get IE 6+7 to behave perfectly */
.fl-tabs li a {padding:3px 16px 2px; background-color:#fff; margin-left:-5px; *margin-bottom:-6px; zoom:1; border:1px solid #000; color:#999;}
.fl-tabs li a:hover {}
.fl-tabs-center {text-align:center;}
.fl-tabs-left {text-align:left; padding-left:10px;}
.fl-tabs-right {text-align:right; padding-right:15px;}
.fl-tabs .fl-reorderer-dropMarker {padding:0 3px; background-color:#c00;margin:0 5px 0 -5px; zoom:1;}
.fl-tabs .fl-tabs-active a {padding:3px 16px; border-bottom:none; color:#000;}
.fl-tabs-content {padding:5px;}
/* get webkit to behave perfectly -
* unfortunately, Chrome gets caught in this too even though it applied the original padding values fine
*/
@media screen and (-webkit-min-device-pixel-ratio:0){
    .fl-tabs li a {padding:3px 16px 3px;}
    .fl-tabs .fl-tabs-active a {padding:3px 16px 4px;}
}

/*
* Menus: quick horizontal and vertical menu
* Requires list items with anchors
*/
.fl-listmenu, /* <=== fl-listmenu is DEPRECATED! */
.fl-list-menu {padding:0px; margin:0; border-bottom-width:1px; border-bottom-style:solid;}

.fl-listmenu li, /* <=== fl-listmenu is DEPRECATED! */
.fl-list-menu li {margin:0; padding:0; list-style-type:none; border-width:1px; border-style:solid; border-bottom:none;}

.fl-listmenu a, /* <=== fl-listmenu is DEPRECATED! */
.fl-list-menu a {padding:5px 5px; display:block; zoom:1; outline:none;} /* list item needs layout (http://www.brunildo.org/test/IEWlispace.php) */

.fl-list-menu a:hover, .fl-list-menu a:focus {
    padding: 4px 4px;
    border: 1px solid black;
}

.fl-list-menu .fl-activemenu a {
    background-color: #CCCCCC;
    color: #000000;
}

/*
* Picture Grid: a quick picture grid layout
* Dependency: list-based markup
*/
ul.fl-grid, .fl-grid ul {padding:0; margin:0; overflow:auto;}
.fl-grid li {list-style-type:none; display:inline;}
.fl-grid li {float:left; width:19%; margin:0.5%; height:150px; overflow:hidden; position:relative; display:inline;}
.fl-grid li img {display:block; margin:5px auto;}
.fl-grid li .caption, /*<=== DEPRECATED SYNTAX */
.fl-grid li .fl-grid-caption {position:absolute; left:0px; bottom:0px; width:100%; text-align:center; height:1em; padding:3px 0;}

/*
* Icons: quick accessible icon helper
*/
.fl-icon {
    text-indent:-5000px;
    overflow:hidden;
    cursor:pointer;
    display:block;
    height:16px;
    width:16px;
    margin-left:5px;
    margin-right:5px;
    background-position:center center;
    background-repeat:no-repeat;
}
input.fl-icon {padding-left:16px;}

/*
* Buttons: quick sliding door buttons
* requires a container with a sub container
*/
.fl-button-left {float:left; margin-right:10px; padding:0 0 0 16px; background-position:left center; background-repeat:no-repeat;}
.fl-button-right {float:right; margin-left:10px; padding:0 0 0 16px; background-position:left center; background-repeat:no-repeat;}
.fl-button-inner {float:left; padding:5px 16px 5px 0; cursor:pointer; background-position:right center; background-repeat:no-repeat;}

/*
* Widgets: modelled after the mycamtools widget model
*/
.fl-widget {padding:5px; margin-bottom:10px;}
.fl-widget .button {margin:0 5px;}
.fl-grabbable .fl-widget-titlebar {background-position:center top; background-repeat:no-repeat; cursor:move;}
.fl-widget .fl-widget-titlebar {}
.fl-widget .fl-widget-titlebar h2 {padding:0; margin:0; font-size:105%;}
.fl-widget .fl-widget-titlebar .fl-button-inner {
    font-size:0.8em;
    padding-bottom:0.2em;
    padding-top:0.2em;
}
.fl-widget .fl-widget-controls {margin:-1.3em 0 1.5em 0;}
.fl-widget .fl-widget-options {margin-top:5px; padding:0px 10px;}
.fl-widget .fl-widget-options ul {margin:0; padding:0; overflow:hidden; zoom:1;}
.fl-widget .fl-widget-options li {list-style-type:none; float:left; display:inline; padding:0 5px 0 5px; margin-left:-5px;}
.fl-widget .fl-widget-options a {margin-right:5px;}
.fl-widget .fl-widget-content {zoom:1; margin:5px 0 0 0; overflow: auto;}
.fl-widget .fl-widget-content ul {}
.fl-widget .empty * {padding-top:10px; margin-left:auto; margin-right:auto; text-align:center;}


/* Common widget sub-components */
.fl-widget .menu {margin:0;}
.fl-widget .toggle {width:32px;}
.fl-widget .on {background-position:left top;}
.fl-widget .off {background-position:left bottom;}

/*
* Forms and Form Controls
* Common arrangements for form inputs in a list
* Alignment requires list of fl-label elements placed before the control
*/
.fl-controls-left li {list-style-type:none; text-align:left;}
.fl-controls-left .fl-label {float:left; text-align:left; width:50%; margin-right:5px;}

.fl-controls-right li {list-style-type:none; display:block; text-align:left;}
.fl-controls-right .fl-label {float:left; text-align:right; width:50%; margin-right:5px;}

.fl-controls-centered li {list-style-type:none; display:block; text-align:left;}
.fl-controls-centered .fl-label {float:left; text-align:center; width:50%; margin-right:5px;}

/**
* Knockout Background Images
*/
.fl-noBackgroundImages, .fl-noBackgroundImages * {
    background-image:none !important;
}
.fl-noBackgroundImages .fl-icon {
    text-indent:0 !important;
    width:auto !important;
    background-color:transparent !important;
}

/* Progressive Enhancement: JS will reverse the display setup if it is enabled */
.fl-ProgEnhance-enhanced, /* << syntax breaks conventions and is Deprecated*/
.fl-progEnhance-enhanced {display:none}

.fl-ProgEnhance-basic, /* << syntax breaks conventions and is Deprecated*/
.fl-progEnhance-basic {}

/* Hiding Content. The following styles are based on css from http://html5boilerplate.com */

/* Hide for both screenreaders and browsers */
.fl-hidden { display: none; visibility: hidden; }

/* Hide for both screenreaders and browsers but maintain layout */
.fl-hidden-invisible { visibility: hidden; }

/* Hide for browsers but available for screenreaders */
.fl-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Add focus for keyboard users */
.fl-hidden-accessible.fl-focus:active,
.fl-hidden-accessible.fl-focus:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide text for image replacement */
.fl-hidden-replace { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }


/* DEPRECATED */
.fl-offScreen-hidden {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}